<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    .wai{
        width:600px;
        height:100px;
        border:2px solid red;
    }

    .nei{
        width:40px;
        height:80px;
        background:red;
    }

    .nei{
        animation:x 5s linear infinite alternate; /*infinite无限次 alternate来回执行 一去一回*/
    }

    @keyframes x {
        0%{margin-left:0px;}
        25%{background:yellowgreen;}
        50%{background:goldenrod;}
        100%{background-color:coral;
        margin-left:500px;}
    }
</style>
<body>
    

    <div class="wai">
        <div class="nei"></div>
    </div>
</body>
</html>